<!--  -->
<template>
  <div class="personal-mirror">
    <div class="personal-header">
      <div class="header-wrap">
        <div class="header-left">
          我的镜像
        </div>
        <div class="header-right">
          <el-button type="primary" @click="newMirroFun()">新建镜像</el-button>
        </div>
      </div>
    </div>
    <div class="personal-con">
      <el-table
      :data="tableData"
      v-loading="tableLoad"
      style="width: 100%">
        <el-table-column
          width="200"
          class="mirror-name"
          label="镜像名称">
          <template slot-scope="scope">
            <span style="color: #2196F3" class="mirror-name-text" @click="handleDetails(scope.row.id)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="Docker镜像">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">生成中</span>
            <span v-else-if="scope.row.status == 3">生成失败</span>
            <span v-else-if="scope.row.status == 2">{{ scope.row.path }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="200"
          label="时间">
          <template slot-scope="scope">
            <span>{{ new Date(scope.row.createTime).Format("yyyy-MM-dd hh:mm:ss") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="language"
          width="150"
          label="编程语言">
        </el-table-column>
        <el-table-column
          prop="framework"
          width="150"
          label="算法框架">
        </el-table-column>
        <el-table-column
          width="80"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="personal-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="basePagenate">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="pageNumber"
          :total="total"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      width="420px"
      custom-class="mirror-delete-wrap"
      :visible.sync="mirrorDeleteBtn"
      center>
      <div class="mirror-delete">
        <h4>是否确认删除该镜像？</h4>
        <div class="delete-btn">
          <el-button type="primary" class="cancel-delete" @click="cancelDialogFun()">取消</el-button>
          <el-button type="primary" class="determine-delete" @click="deleteDialogFun()">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserImagesList, deleteUserImag } from '@/api/mirror'
import qs from 'qs'

export default {
  data () {
    return {
      // 总页数
      total: 2,
      tableData: [
        {
          name: '',
          docker: '',
          timer: '',
          language: '',
          algorithm: '',
          operation: ''
        }
      ],
      // 每页条数
      pageSize: 10,
      selectedMirro: {},
      // 当前页
      pageNumber: 1,
      mirrorDeleteBtn: false,
      tableLoad: false
    }
  },

  // components: {},

  // computed: {},

  mounted () {
    this._getUserImagesList()
  },

  methods: {
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNumber = 1
      // this._getFileList(this.curFilePath)
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      // this._getFileList(this.curFilePath)
    },
    // 删除镜像点击
    handleDelete (index, con) {
      this.selectedMirro = con
      this.mirrorDeleteBtn = true
    },
    // 镜像详情页跳转
    handleDetails (mirroid) {
      this.$router.push({ path: '/mirrordetails', query: { id: mirroid } })
    },
    // 取消删除镜像
    cancelDialogFun () {
      this.mirrorDeleteBtn = false
      this.selectedMirro = {}
    },
    // 确定删除镜像
    deleteDialogFun () {
      let data = qs.stringify({
        id: this.selectedMirro.id
      })
      deleteUserImag(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '删除成功！', showClose: true, type: 'success' })
          this.mirrorDeleteBtn = false
          this._getUserImagesList()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 跳转新建镜像
    newMirroFun () {
      this.$router.push({ path: '/newmirror' })
    },
    // 获取镜像列表
    _getUserImagesList () {
      let data = qs.stringify({
        pageNum: this.pageNumber,
        pageSize: this.pageSize
      })
      this.tableLoad = true
      getUserImagesList(data).then(res => {
        this.tableLoad = false
        if (res.message.code === 0) {
          this.tableData = res.data.list
          this.totalPage = res.data.pages
        } else {
          this.$message({ message: res.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}

</script>
<style lang="stylus">
.personal-mirror
  .personal-header
    width 100%
    background #F4F7F8
    .header-wrap
      max-width 1162px
      margin  0 auto
      padding 30px 0
      display flex
      justify-content space-between
      align-items center
      .header-left
        font-size 28px
        line-height 40px
        color #2D323B
        font-weight bold
      .header-right
        .el-button
          padding 8px 31px
          font-size 14px
          line-height 20px
  .personal-con
    max-width 1162px
    margin 23px auto 0
    .el-table th
      background #F1F8FF
    .el-table th.is-leaf
      border-bottom none
    .el-table td.mirror-name
      color #2196F3
      cursor pointer
    .personal-delete
      font-size 14px
  .mirror-delete-wrap
    .el-dialog__header
      padding 0
    .el-dialog__body
      padding 50px 0
    .mirror-delete
      h4
        font-size 16px
        line-height 22px
        font-weight bold
        color #2D323B
        text-align center
        margin-bottom 26px
      .delete-btn
        margin 0 auto
        width 150px
        display flex
        justify-content space-between
        .el-button
          width 56px
          padding 6px 14px
          font-size 14px
          line-height 20px
          border-radius 3px
        .cancel-delete
          color #2D323B
          background #ffffff
          border 1px solid #DBDFE6
        .determine-delete
          background #2E94F9
          color #ffffff
.mirror-name-text
  cursor pointer
  font-size 14px
</style>
